<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商产品展示 - addClass应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: #2c3e50;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .subtitle {
            color: #7f8c8d;
            font-size: 16px;
        }

        .filter-section {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #34495e;
        }

        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .filter-option {
            padding: 8px 16px;
            background-color: #ecf0f1;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            color: #7f8c8d;
        }

        .filter-option:hover {
            background-color: #d5dbdb;
        }

        .filter-option.active {
            background-color: #3498db;
            color: white;
        }

        .view-options {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 15px;
        }

        .view-option {
            padding: 8px 16px;
            background-color: #ecf0f1;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            transition: all 0.3s ease;
        }

        .view-option:hover {
            background-color: #d5dbdb;
        }

        .view-option.active {
            background-color: #3498db;
            color: white;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .products-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .product-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        .product-card.grid-view.hidden,
        .product-card.list-view.hidden {
            display: none;
        }

        .product-card.grid-view {
            display: flex;
            flex-direction: column;
        }

        .product-card.list-view {
            display: flex;
            flex-direction: row;
        }

        .product-card.list-view .product-image {
            width: 200px;
            height: 150px;
        }

        .product-card.list-view .product-info {
            flex: 1;
            padding: 15px;
        }

        .product-card.grid-view .product-image {
            width: 100%;
            height: 200px;
        }

        .product-image {
            background-size: cover;
            background-position: center;
        }

        .product-info {
            padding: 15px;
        }

        .product-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #2c3e50;
        }

        .product-category {
            display: inline-block;
            padding: 4px 8px;
            background-color: #e8f4fc;
            color: #3498db;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .product-price {
            font-size: 20px;
            font-weight: 700;
            color: #e74c3c;
            margin-bottom: 10px;
        }

        .product-description {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .product-rating {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .rating-stars {
            color: #f39c12;
            margin-right: 5px;
        }

        .rating-count {
            color: #7f8c8d;
            font-size: 12px;
        }

        .product-actions {
            display: flex;
            justify-content: space-between;
        }

        .action-button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .buy-now {
            background-color: #2ecc71;
            color: white;
        }

        .buy-now:hover {
            background-color: #27ae60;
        }

        .add-to-cart {
            background-color: #3498db;
            color: white;
        }

        .add-to-cart:hover {
            background-color: #2980b9;
        }

        .wishlist {
            background-color: #ecf0f1;
            color: #7f8c8d;
        }

        .wishlist:hover {
            background-color: #bdc3c7;
        }

        .wishlist.active {
            background-color: #e74c3c;
            color: white;
        }

        .product-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            z-index: 1;
        }

        .badge-new {
            background-color: #2ecc71;
            color: white;
        }

        .badge-sale {
            background-color: #e74c3c;
            color: white;
        }

        .badge-out-of-stock {
            background-color: #7f8c8d;
            color: white;
        }

        .highlight {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px 20px;
            background-color: #2ecc71;
            color: white;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .notification.show {
            transform: translateY(0);
            opacity: 1;
        }

        @media (max-width: 768px) {
            .filter-group {
                min-width: 100%;
            }

            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            }

            .product-card.list-view {
                flex-direction: column;
            }

            .product-card.list-view .product-image {
                width: 100%;
                height: 200px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>精选商品展示</h1>
            <p class="subtitle">基于 addClass 方法的动态商品筛选系统</p>
        </header>

        <div class="filter-section">
            <div class="filter-group">
                <label class="filter-label">商品分类</label>
                <div class="filter-options" id="category-filters">
                    <div class="filter-option active" data-category="all">全部</div>
                    <div class="filter-option" data-category="electronics">电子产品</div>
                    <div class="filter-option" data-category="clothing">服装</div>
                    <div class="filter-option" data-category="home">家居</div>
                    <div class="filter-option" data-category="beauty">美妆</div>
                </div>
            </div>

            <div class="filter-group">
                <label class="filter-label">价格区间</label>
                <div class="filter-options" id="price-filters">
                    <div class="filter-option active" data-price="all">全部</div>
                    <div class="filter-option" data-price="0-100">¥0-100</div>
                    <div class="filter-option" data-price="100-500">¥100-500</div>
                    <div class="filter-option" data-price="500-1000">¥500-1000</div>
                    <div class="filter-option" data-price="1000+">¥1000以上</div>
                </div>
            </div>

            <div class="filter-group">
                <label class="filter-label">商品状态</label>
                <div class="filter-options" id="status-filters">
                    <div class="filter-option active" data-status="all">全部</div>
                    <div class="filter-option" data-status="new">新品</div>
                    <div class="filter-option" data-status="sale">促销</div>
                    <div class="filter-option" data-status="out-of-stock">缺货</div>
                </div>
            </div>
        </div>

        <div class="view-options">
            <div class="view-option active" id="grid-view">网格视图</div>
            <div class="view-option" id="list-view">列表视图</div>
        </div>

        <div id="products-container" class="products-grid">
            <!-- 产品卡片将通过 JavaScript 动态生成 -->
        </div>

        <div id="notification" class="notification">已添加到购物车</div>
    </div>

    <script>
        // addClass 方法实现
        const addClass = (el, className) =>
            el.classList.add(...(Array.isArray(className) ? className : [className]));

        // 模拟产品数据
        const products = [
            {
                id: 1,
                name: "高清智能电视",
                category: "electronics",
                price: 2999,
                description: "4K超高清分辨率，智能语音控制，多平台流媒体支持。",
                image: "https://placehold.co/300x200?text=Smart+TV",
                rating: 4.5,
                reviewCount: 120,
                status: "new"
            },
            {
                id: 2,
                name: "无线蓝牙耳机",
                category: "electronics",
                price: 299,
                description: "主动降噪，长续航，舒适佩戴，音质出众。",
                image: "https://placehold.co/300x200?text=Wireless+Headphones",
                rating: 4.8,
                reviewCount: 230,
                status: "sale"
            },
            {
                id: 3,
                name: "男士休闲夹克",
                category: "clothing",
                price: 399,
                description: "舒适面料，时尚设计，适合日常穿着。",
                image: "https://placehold.co/300x200?text=Casual+Jacket",
                rating: 4.2,
                reviewCount: 85,
                status: ""
            },
            {
                id: 4,
                name: "女士连衣裙",
                category: "clothing",
                price: 459,
                description: "优雅设计，修身剪裁，适合多种场合。",
                image: "https://placehold.co/300x200?text=Dress",
                rating: 4.6,
                reviewCount: 112,
                status: "new"
            },
            {
                id: 5,
                name: "北欧风格沙发",
                category: "home",
                price: 1899,
                description: "简约设计，舒适坐感，易于清洁。",
                image: "https://placehold.co/300x200?text=Sofa",
                rating: 4.4,
                reviewCount: 67,
                status: ""
            },
            {
                id: 6,
                name: "多功能厨房料理机",
                category: "home",
                price: 599,
                description: "多种功能，强劲马达，易于清洗。",
                image: "https://placehold.co/300x200?text=Food+Processor",
                rating: 4.3,
                reviewCount: 94,
                status: "out-of-stock"
            },
            {
                id: 7,
                name: "保湿面霜套装",
                category: "beauty",
                price: 199,
                description: "深层保湿，修复肌肤，适合各种肤质。",
                image: "https://placehold.co/300x200?text=Moisturizer",
                rating: 4.7,
                reviewCount: 156,
                status: "sale"
            },
            {
                id: 8,
                name: "专业化妆刷套装",
                category: "beauty",
                price: 149,
                description: "柔软刷毛，多种形状，适合各种化妆需求。",
                image: "https://placehold.co/300x200?text=Makeup+Brushes",
                rating: 4.5,
                reviewCount: 78,
                status: ""
            },
            {
                id: 9,
                name: "智能手表",
                category: "electronics",
                price: 899,
                description: "健康监测，通知提醒，长续航。",
                image: "https://placehold.co/300x200?text=Smart+Watch",
                rating: 4.6,
                reviewCount: 203,
                status: "new"
            },
            {
                id: 10,
                name: "儿童益智玩具",
                category: "home",
                price: 99,
                description: "安全材质，促进智力发展，适合3-6岁儿童。",
                image: "https://placehold.co/300x200?text=Kids+Toy",
                rating: 4.4,
                reviewCount: 45,
                status: "sale"
            },
            {
                id: 11,
                name: "男士运动鞋",
                category: "clothing",
                price: 499,
                description: "舒适缓震，透气设计，适合日常运动。",
                image: "https://placehold.co/300x200?text=Sports+Shoes",
                rating: 4.3,
                reviewCount: 132,
                status: ""
            },
            {
                id: 12,
                name: "高端护肤精华液",
                category: "beauty",
                price: 699,
                description: "高浓度活性成分，改善肤质，提亮肤色。",
                image: "https://placehold.co/300x200?text=Serum",
                rating: 4.9,
                reviewCount: 87,
                status: "out-of-stock"
            }
        ];

        // DOM 元素
        const productsContainer = document.getElementById('products-container');
        const categoryFilters = document.getElementById('category-filters').children;
        const priceFilters = document.getElementById('price-filters').children;
        const statusFilters = document.getElementById('status-filters').children;
        const gridViewBtn = document.getElementById('grid-view');
        const listViewBtn = document.getElementById('list-view');
        const notification = document.getElementById('notification');

        // 初始化页面
        function initPage() {
            renderProducts(products);
            setupEventListeners();
        }

        // 渲染产品列表
        function renderProducts(productsArray) {
            productsContainer.innerHTML = '';

            productsArray.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card grid-view fade-in';
                productCard.setAttribute('data-id', product.id);
                productCard.setAttribute('data-category', product.category);
                productCard.setAttribute('data-price', product.price);
                productCard.setAttribute('data-status', product.status);

                // 添加状态标签
                let badgeHTML = '';
                if (product.status === 'new') {
                    badgeHTML = '<div class="product-badge badge-new">新品</div>';
                } else if (product.status === 'sale') {
                    badgeHTML = '<div class="product-badge badge-sale">促销</div>';
                } else if (product.status === 'out-of-stock') {
                    badgeHTML = '<div class="product-badge badge-out-of-stock">缺货</div>';
                }

                // 生成星级评分
                const fullStars = Math.floor(product.rating);
                const halfStar = product.rating % 1 >= 0.5;
                let starsHTML = '';

                for (let i = 0; i < 5; i++) {
                    if (i < fullStars) {
                        starsHTML += '★';
                    } else if (i === fullStars && halfStar) {
                        starsHTML += '★';
                    } else {
                        starsHTML += '☆';
                    }
                }

                productCard.innerHTML = `
                    <div class="product-image" style="background-image: url('${product.image}')"></div>
                    ${badgeHTML}
                    <div class="product-info">
                        <h3 class="product-name">${product.name}</h3>
                        <div class="product-category">${getCategoryName(product.category)}</div>
                        <div class="product-price">¥${product.price.toLocaleString()}</div>
                        <p class="product-description">${product.description}</p>
                        <div class="product-rating">
                            <div class="rating-stars">${starsHTML}</div>
                            <div class="rating-count">(${product.reviewCount}条评价)</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-button add-to-cart">加入购物车</button>
                            <button class="action-button wishlist">收藏</button>
                        </div>
                    </div>
                `;

                productsContainer.appendChild(productCard);
            });

            // 添加事件监听器
            const addToCartButtons = document.querySelectorAll('.add-to-cart');
            addToCartButtons.forEach(button => {
                button.addEventListener('click', handleAddToCart);
            });

            const wishlistButtons = document.querySelectorAll('.wishlist');
            wishlistButtons.forEach(button => {
                button.addEventListener('click', handleWishlist);
            });
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 分类筛选
            for (let i = 0; i < categoryFilters.length; i++) {
                categoryFilters[i].addEventListener('click', function () {
                    updateActiveFilter(categoryFilters, this);
                    filterProducts();
                });
            }

            // 价格筛选
            for (let i = 0; i < priceFilters.length; i++) {
                priceFilters[i].addEventListener('click', function () {
                    updateActiveFilter(priceFilters, this);
                    filterProducts();
                });
            }

            // 状态筛选
            for (let i = 0; i < statusFilters.length; i++) {
                statusFilters[i].addEventListener('click', function () {
                    updateActiveFilter(statusFilters, this);
                    filterProducts();
                });
            }

            // 视图切换
            gridViewBtn.addEventListener('click', function () {
                updateViewMode('grid');
            });

            listViewBtn.addEventListener('click', function () {
                updateViewMode('list');
            });
        }

        // 更新激活的筛选器
        function updateActiveFilter(filterElements, clickedElement) {
            for (let i = 0; i < filterElements.length; i++) {
                filterElements[i].classList.remove('active');
            }
            addClass(clickedElement, 'active');
        }

        // 筛选产品
        function filterProducts() {
            const selectedCategory = document.querySelector('#category-filters .active').getAttribute('data-category');
            const selectedPrice = document.querySelector('#price-filters .active').getAttribute('data-price');
            const selectedStatus = document.querySelector('#status-filters .active').getAttribute('data-status');

            const productCards = document.querySelectorAll('.product-card');
            productCards.forEach(card => {
                const category = card.getAttribute('data-category');
                const price = parseInt(card.getAttribute('data-price'));
                const status = card.getAttribute('data-status');

                let categoryMatch = selectedCategory === 'all' || category === selectedCategory;
                let priceMatch = selectedPrice === 'all';

                if (selectedPrice === '0-100') {
                    priceMatch = price >= 0 && price <= 100;
                } else if (selectedPrice === '100-500') {
                    priceMatch = price > 100 && price <= 500;
                } else if (selectedPrice === '500-1000') {
                    priceMatch = price > 500 && price <= 1000;
                } else if (selectedPrice === '1000+') {
                    priceMatch = price > 1000;
                }

                let statusMatch = selectedStatus === 'all' || status === selectedStatus;

                if (categoryMatch && priceMatch && statusMatch) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
        }

        // 更新视图模式
        function updateViewMode(mode) {
            if (mode === 'grid') {
                addClass(gridViewBtn, 'active');
                listViewBtn.classList.remove('active');
                productsContainer.className = 'products-grid';

                const productCards = document.querySelectorAll('.product-card');
                productCards.forEach(card => {
                    card.classList.remove('list-view');
                    addClass(card, 'grid-view');
                });
            } else {
                addClass(listViewBtn, 'active');
                gridViewBtn.classList.remove('active');
                productsContainer.className = 'products-list';

                const productCards = document.querySelectorAll('.product-card');
                productCards.forEach(card => {
                    card.classList.remove('grid-view');
                    addClass(card, 'list-view');
                });
            }
        }

        // 处理添加到购物车
        function handleAddToCart(event) {
            const button = event.target;
            const productCard = button.closest('.product-card');
            const productId = productCard.getAttribute('data-id');
            const productName = productCard.querySelector('.product-name').textContent;

            // 添加高亮效果
            addClass(productCard, 'highlight');
            setTimeout(() => {
                productCard.classList.remove('highlight');
            }, 1500);

            // 显示通知
            notification.textContent = `已将 ${productName} 添加到购物车`;
            addClass(notification, 'show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);

            console.log(`添加商品到购物车: ID=${productId}, 名称=${productName}`);
        }

        // 处理收藏
        function handleWishlist(event) {
            const button = event.target;
            if (button.classList.contains('active')) {
                button.classList.remove('active');
                button.textContent = '收藏';
            } else {
                addClass(button, 'active');
                button.textContent = '已收藏';
            }
        }

        // 获取分类名称
        function getCategoryName(category) {
            const categoryMap = {
                'electronics': '电子产品',
                'clothing': '服装',
                'home': '家居',
                'beauty': '美妆'
            };
            return categoryMap[category] || category;
        }

        // 初始化页面
        initPage();
    </script>
</body>

</html>